<template>
    <div class="layout-padding">
        <!-- 条件查询 -->
        <el-form :inline="true" :model="query" label-width="80px" label-suffix=":">
            <el-form-item label="菜单名称">
                <el-input v-model="query.keyword"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button v-auth="'system:menu:search'" icon="ele-Search" type="primary" @click="queryData">查询</el-button>
                <el-button v-auth="'system:menu:add'" icon="ele-Plus" type="success" @click="handleAdd()">新增菜单</el-button>
            </el-form-item>
        </el-form>
        <!-- row-key="id" 指定唯一标识的属性名，其中数据要包含children属性才会被渲染为树状 -->
         <el-table class="w100"
            ref="tableListRef"
            :data="tableList" 
            stripe 
            border 
            row-key="id" 
            @row-click="toggleRow"           
            v-loading="loading"
            >
            <el-table-column label="菜单名称" header-align="center" align="left" >
                <template #default="{row}">
                    <SvgIcon style="width: 29px; display: inline; position:relative; top:4px;" :name="row.meta?.icon || ''" />
                    <span class="ml10" >{{ row.meta?.title }}</span>
                </template>
            </el-table-column>
            <el-table-column label="路由地址" prop="path" header-align="center" align="left" show-overflow-tooltip ></el-table-column>
            <el-table-column label="组件路径" prop="component" header-align="center" align="left" show-overflow-tooltip ></el-table-column>
            <el-table-column label="权限标识" prop="code" header-align="center" align="left"  ></el-table-column>
            <el-table-column label="类型" prop="type" width="100" header-align="center" align="left"  >
                <template #default="{row}">
                    <el-tag :type="row.type == 1 ? 'primary' : 'success'" effect="plain" >
                        {{ row.type == 1 ? '菜单' : '按钮' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="排序" prop="sort" width="100" header-align="center" align="left"  ></el-table-column>
            <el-table-column v-auths="['system:child:add','system:menu:edit','system:menu:delete']" label="操作" width="240" header-align="center" align="left" >
                <template #default="{row}">
                    <el-button v-auth="'system:child:add'" v-if="row.type != '2'" link type="primary" icon="ele-Plus" @click.stop="handleAdd(row.id)">新增下级</el-button>
                    <el-button v-auth="'system:menu:edit'" link type="warning" icon="ele-Edit" @click="handleEdit(row)">修改</el-button>
                    <el-popconfirm width="auto" :title="`确定删除【${row.meta?.title}】吗？`" @confirm="handleDelete(row.id)">
                        <template #reference>
                            <el-button v-auth="'system:menu:delete'" link type="danger" icon="ele-Delete" @click.stop>删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <MenuEdit ref="editRef" @refresh="queryData"></MenuEdit>
    </div>
</template>

<script setup lang="ts" name="SystemMenu" >
import { ref, reactive, toRefs, onMounted, defineAsyncComponent } from 'vue'
import { getList, deleteById } from '@/api/system/menu'
const MenuEdit = defineAsyncComponent(() => import('@/views/system/menu/components/MenuEdit.vue'))

// 声明状态
const state = reactive({
    loading: false,
    query: {
        keyword: ''
    } as SysMenuQuery,
    tableList: [] as SysMenuType[]
})

// 列表ref
const tableListRef = ref()

const { query, loading, tableList } = { ...toRefs(state) }

// 树形表格点击行
function toggleRow(row: SysMenuType) {
    tableListRef.value.toggleRowExpansion(row)
}

onMounted(() => {
    queryData()
})

async function queryData() {
    try {
        state.loading = true
        const { data } = await getList()
        state.tableList = data
    } catch (error) {
    } finally {
        state.loading = false
    }
}

// 编辑ref
const editRef = ref()

// 新增
function handleAdd(parentId?: string) {
    editRef.value.open('add', '新增', {parentId})
}

// 修改
function handleEdit(row: SysMenuType) {
    editRef.value.open('edit', '修改', row)
}

// 删除
async function handleDelete(id: string) {
    try {
        state.loading = true
        await deleteById(id).then(() => {
            // notify('删除成功', {type:'success'})
            // 刷新列表
            queryData()
        })
    } catch(error) {

    } finally {
        state.loading = false
    }
}
</script>

<style scoped>

</style>